<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title>Length Unit Conversion</title>

    <!-- styles -->
    <link rel="stylesheet" href="../assets/css/style_lengthconverter.css" />
  </head>
  <body>
	<div class="container">
	<h1 class="top_writing">Length Unit Converter</h1>
		<div class="row">
			<div class="col">
				<div class="input-group">
					<input type="number" class="form-control" placeholder="Enter Value" arial-label="Number for centimeters" id="inputCm">
					<span class="input-group-addon">cm.</span>
				</div>
			
				<div class="input-group">
					<input type="number" class="form-control" placeholder="Enter Value" arial-label="Number for inches" id="inputIn">
					<span class="input-group-addon">in.</span>
				</div>
			
				<div class="input-group">
					<input type="number" class="form-control" placeholder="Enter Value" arial-label="Number for meters" id="inputM">
					<span class="input-group-addon">m.</span>
				</div>
                <div class="input-group">
					<input type="number" class="form-control" placeholder="Enter Value" arial-label="Number for kilometers" id="inputKM">
					<span class="input-group-addon">km.</span>
				</div>
                <div class="input-group">
					<input type="number" class="form-control" placeholder="Enter Value" arial-label="Number for milimeter" id="inputmm">
					<span class="input-group-addon">mm.</span>
				</div>
			</div>
		</div>
	</div>
    <script src="../assets/js/script_lengthconverter.js"></script>
</body>
</html>